<template>
  <div id="container"></div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "907c03ee32f7e988c758f95bec55b7c4",// 安全密钥
  };
  AMapLoader.load({
    key: "a038ba74869ce88017a74d206f2f6f90", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [121.473667,31.230525], // 初始化地图中心点位置
    });
  }).catch((e) => {
     console.log(e);
    });
})

onUnmounted(() => {
  map?.destroy();
})

</script>

<style scoped>
#container {
  width: 80%;
  height: 600px;
  margin: 100px auto;
  border: 2px solid red;
}
</style>